<template>
  <div>
    <!-- 添加或修改资产清单表对话框 -->
    <el-dialog ref="editDialog" :visible.sync="openFlag" :title="title" width="50%" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="108px" inline class="dialog-form-two">
        <el-form-item label="资产编码" prop="number">
          <el-input v-model.trim="form.number" placeholder="请输入资产编码" />
        </el-form-item>
        <el-form-item label="资产名称" prop="name">
          <el-input v-model.trim="form.name" placeholder="请输入资产名称" />
        </el-form-item>
        <el-form-item label="资产分类" prop="categoryId">
          <el-input v-model.trim="form.categoryName" placeholder="请输入资产分类" disabled>
          </el-input>
          <el-button @click="openChooseCategory" style="position: absolute;right:20px;adding-right:10px" type="text">选择</el-button>

        </el-form-item>
        <el-form-item label="RFID" prop="rfid">
          <el-input v-model.trim="form.rfid" placeholder="请输入RFID" />
        </el-form-item>
        <el-form-item label="品牌" prop="brand">
          <el-input v-model.trim="form.brand" placeholder="请输入品牌" />
        </el-form-item>
        <el-form-item label="型号" prop="model">
          <el-input v-model.trim="form.model" placeholder="请输入型号" />
        </el-form-item>
        <el-form-item label="购置方式" prop="buyWay">
          <el-input v-model.trim="form.buyWay" placeholder="请输入购置方式" />
        </el-form-item>
        <el-form-item label="购置时间" prop="buyTime">
          <el-date-picker clearable size="small" v-model="form.buyTime" type="datetime" value-format="yyyy-MM-ddTHH:mm:ss"
            placeholder="选择购置时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="购置金额" prop="buyPrice">
          <el-input v-model.trim="form.buyPrice" placeholder="请输入购置金额" />
        </el-form-item>
        <el-form-item label="管理员ID" prop="adminId">
          <el-input v-model.trim="form.adminId" placeholder="请输入管理员ID" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <choose-category ref="chooseCategoryDialog" @sub="onSubChooseCategory"
   @close="onCloseChooseCategoryDialog"></choose-category>
  </div>
</template>

<script>

import { addAssetItem, updateAssetItem, getAssetItem } from "@/api/asset/assetItem";
import ChooseCategory from './chooseCategory.vue'

export default {
  name: "AssetItemEdit",
  components: { ChooseCategory },
  props: {
  },
  data() {
    return {
      openFlag: false,
      currentRow: null,
      isEdit: false,
      // 表单参数
      form: {
        id: null,
        number: null,
        name: null,
        categoryId: null,
        categoryName: null,
        rfid: null,
        brand: null,
        model: null,
        buyWay: null,
        buyTime: null,
        buyPrice: null,
        adminId: null
      },
      // 表单校验
      rules: {
        number: [
          {
            required: true, message: "资产编码不能为空", trigger: "blur"
          }
        ],
        name: [
          { required: true, message: "资产名称不能为空", trigger: "blur" }
        ],
      },
    }
  },
  computed: {
    title() {
      this.isEdit ? "编辑资产清单表" : "新增资产清单表"
    }
  },
  methods: {
    open(currentRow) {
      this.openFlag = true;
      this.reset();
      if (currentRow) {
        this.isEdit = true;
        this.currentRow = currentRow;
        this.handleUpdate(currentRow);
      } else {
        this.isEdit = false;
        this.currentRow = null;
      }
    },
    // 取消按钮
    cancel() {
      this.$emit("edit-action", 'cancel');
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        number: null,
        name: null,
        categoryId: null,
        categoryName: null,
        rfid: null,
        brand: null,
        model: null,
        buyWay: null,
        buyTime: null,
        buyPrice: null,
        adminId: null
      };
    },
    // 打开选择分类的窗口
    openChooseCategory() {
      this.$refs.chooseCategoryDialog.open();
    },
    // 关闭选择分类窗口时，要重新打开编辑窗口
    onCloseChooseCategoryDialog() {
      this.openFlag = true;
    },
    onSubChooseCategory(cate) {
      this.form.categoryId = cate.id;
      this.form.categoryName = cate.name;
      console.log('form', this.form);
      
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      
      const id = row.id || this.ids
      getAssetItem(id).then(response => {
        this.form = response;
      });
    },
    /** 提交按钮 */
    submitForm: function () {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.isEdit) {
            updateAssetItem(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.openFlag = false;
              this.$emit("sub");
            });
          } else {
            addAssetItem(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.openFlag = false;
              this.$emit("sub");
            })
          }

        }
      });
    },
    
  },
  watch: {
    
  }
}


</script>

